import React, { useEffect, useInsertionEffect, useState } from "react";
import { useLayoutEffect } from "react";

//React.memo用来缓存一个组件用的，只有当前组件内容发生变化才会重新渲染
const Child=React.memo(()=>{
  console.log("child被执行");
  
  return <h1>
    Child
  </h1>
})
function App() {
  const[count,setCount]=useState(100);

  return (
    <div>
      <h1 id="title">APP</h1>
      <button onClick={()=>{
        setCount(count+1);
      }}>{count}</button>
      <hr></hr>
      <Child></Child>
      {/* count变化会导致child自己被重新渲染，但count与child无关联，
      造成资源浪费，让无关组件无需重新渲染
      */}
    </div>
  );
}

export default App;
